<template>
  <div class="newAuthDetailsContainer">
    <div
      class="dialog animated"
      :class="open? 'fadeIn':'fadeOut'"
      v-show="show"
      :style="{visibility: (visible?'visible':'hidden')}"
    >
      <div class="panel animated" :class="open? 'zoomIn':''">
        <div class="title">
          订单详情
          <div class="close" @click="cancel()"></div>
        </div>
        <el-row style="margin-left:0.3rem;">
          <el-col :span="8">校区名称：{{authData.campusName}}</el-col>
          <el-col :span="8">订单号：{{authData.authorizeOrderNo}}</el-col>
          <el-col :span="8">订单时间：{{authData.createTime}}</el-col>
        </el-row>
        <div style="padding:0 0.3rem;">
          <div style="padding-top:0.1rem">
            <div>
              <div class="condition">
                <div class="row_one">
                  <el-input
                    style="width: 3.5rem;margin-left:0.1rem;"
                    placeholder="搜索 课程名称"
                    v-model="searchData.libraryCourseName"
                    clearable
                    class="input_search"
                  ></el-input>
                  <div class="search_btn" style="margin-left:0.1rem;" @click="initData">搜索</div>
                </div>
              </div>
              <table class="table" cellspacing="0">
                <thead class="thead">
                  <tr>
                    <td style="width: 4.5rem;">课程名称</td>
                    <td style="width: 4.5rem;">授权班级个数</td>
                  </tr>
                </thead>
                <tbody class="tbody">
                  <tr v-for="item,index in courseauthorizesettingList">
                    <td>{{item.libraryCourseName}}</td>
                    <td>{{item.authorizeClassNum}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <el-pagination
              class="page"
              layout="total, sizes, prev, pager, next, jumper"
              :current-page="searchData.currPage"
              @size-change="pageSizeChange"
              @current-change="tabledisplayChangePage"
              :total="searchData.total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var vm;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      isAdd: false,
      searchData: {
        currPage: 1,
        total: 0,
        pageSize: 10,
        authorizeOrderId: "",
        campusId: "",
        orgId: "",
        libraryCourseName: ""
      },
      authData: {},
      courseauthorizesettingList: []
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
      vm.authData = data;
      vm.searchData = {
        currPage: 1,
        total: 0,
        pageSize: 10,
        authorizeOrderId: data.authorizeOrderId,
        campusId: data.campusId,
        orgId: data.orgId,
        libraryCourseName: ""
      };
      vm.initData();
    },
    initData() {
      api.courseauthorizesettingList(vm.searchData).then(function(data) {
        if (data.resultCode == 2000) {
          vm.courseauthorizesettingList = data.list;
          vm.searchData.total = data.totalCount;
        } else {z
          vm.$message.error(data.message);
        }
      });
    },
    pageSizeChange(val) {
      vm.searchData.pageSize = val;
      vm.initData();
    },
    tabledisplayChangePage(val) {
      vm.searchData.currPage = val;
      vm.initData();
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
      }, 500);
    }
  },
  created: function() {
    vm = this;
  }
};
</script>
<style lang="scss">
.newAuthDetailsContainer {
  .line_from {
    height: 1px;
    margin: 0.24rem 0.18rem 0.18rem 0.18rem;
    background-color: #f3f6fc;
  }
  .el-form--inline .el-form-item {
    vertical-align: inherit;
  }
  .search_input {
    width: 40%;
    font-size: 0.16rem;
    margin-top: 0.1rem;
  }

  .el-form-item__label {
    font-size: 0.16rem;
    color: #666666;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
.panel {
  width: 10rem;
}
</style>

